<template>
  <div class="top-types">
    <div
      v-for="item in getTypes"
      :key="item.title"
      :class="[
        'top-type',
        'block-box',
        `${clickable ? 'top-type-clickable' : ''}`,
      ]"
      :style="{
        borderColor: item.active ? item.color : 'transparent',
        display: item.show ? '' : 'none',
      }"
      @click="handleChangeType(item)"
    >
      <div
        class="top-type-img"
        :style="{ backgroundColor: item.color, boxShadow: item.boxShadow }"
      >
        <img :src="item.icon" alt="" srcset="" />
      </div>
      <div class="top-type-title">{{ item.title }}</div>
      <div class="top-type-num">
        <span :style="{ color: item.color }">{{ item.num }}</span
        ><span>{{ item.unit }}</span>
      </div>
    </div>
  </div>

  <ItPopup v-if="isShow" @close="isShow = false">
    <div class="types-change-box shadow-block-box">
      <div class="types-change-title">编辑数据</div>
      <div class="types-change-mess">请选择四项展示数据</div>
      <div class="types-list-box">
        <div
          v-for="(item, index) in getEditTypes"
          :key="item.title"
          :class="[
            'top-type',
            'block-box',
            `${clickable ? 'top-type-clickable' : ''}`,
          ]"
          :style="{ borderColor: item.show ? item.color : 'transparent' }"
          @click="handleChangeEditType(index)"
        >
          <div
            class="top-type-img"
            :style="{ backgroundColor: item.color, boxShadow: item.boxShadow }"
          >
            <img :src="item.icon" alt="" srcset="" />
          </div>
          <div class="top-type-title">{{ item.title }}</div>
          <div class="top-type-num">
            <span :style="{ color: item.color }">{{ item.num }}</span
            ><span>{{ item.unit }}</span>
          </div>
          <div class="top-type-state" :style="{ opacity: item.show ? 1 : 0 }">
            已选择
          </div>
        </div>
      </div>
      <div class="types-btn">
        <button @click="sumbitChangeType">确定</button>
      </div>
    </div>
  </ItPopup>
</template>
<script name="TopTypes" setup>
import { ref, computed, toRefs } from 'vue'
import { ItMessage } from '@/components'
const props = defineProps({
  types: {
    type: Array,
    default: () => [],
  },
  clickable: {
    type: Boolean,
    default: true,
  },
})
const getTypes = computed(() => {
  return props.types.filter((item) => item.show)
})
const emits = defineEmits(['changeActive'])

const handleChangeType = (val) => {
  let typeslist = val
  if (props.clickable) {
    let typeslist = props.types.map((item, index) => {
      if (val.title === item.title) {
        item.active = !item.active
      } else {
        item.active = false
      }
      return item
    })
    emits('changeActive', typeslist)
  } else {
    emits('changeActive', typeslist)
  }
}
/**
 * 编辑数据弹窗
 */

let isShow = ref(false)
const showChangeType = () => {
  isShow.value = true
}
defineExpose({ showChangeType })

let checkTypes = ref(props.types)

const getEditTypes = computed(() => {
  return checkTypes.value
})

const handleChangeEditType = (val) => {
  let hasCheck = checkTypes.value.filter((item) => item.show)
  checkTypes.value = checkTypes.value.map((item, index) => {
    if (hasCheck.length > 3) {
      if (val == index) {
        if (item.show) {
          item.show = !item.show
        } else {
          ItMessage({ content: '请选择四项展示数据' })
        }
      }
    } else {
      if (val == index) {
        item.show = !item.show
      }
    }
    return item
  })
}
const sumbitChangeType = () => {
  let hasCheck = checkTypes.value.filter((item) => item.show)
  if (hasCheck.length < 4) {
    ItMessage({ content: '请选择四项展示数据' })
    return false
  }
  let list = checkTypes.value.map((item) => {
    return { ...item, active: false }
  })
  emits('changeActive', list)
  isShow.value = false
}
</script>
<style scoped>
.top-types {
  display: flex;
}
.top-type {
  width: 310px;
  height: 104px;
  position: relative;
  padding: 26px 0px 20px 120px;
  position: relative;
  border: 2px solid transparent;
}
.top-type:not(:last-of-type) {
  margin-right: 29px;
}
.top-type-clickable {
  cursor: pointer;
}
.top-type-img {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  content: '';
  width: 64px;
  height: 64px;
  /* box-shadow: 0px 10px 20px rgba(32, 110, 242, 0.3); */
  border-radius: 15px;
  text-align: center;
}
.top-type-img > img {
  max-width: 32px;
  max-height: 32px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.top-type-title {
  font-size: 18px;
  font-family: Source Han Sans CN-Bold;
  color: #00165d;
  margin-bottom: 5px;
}
.top-type-num span:first-of-type {
  font-size: 28px;
  font-family: Source Han Sans CN-Medium;
  font-weight: 500;
  color: #206ef2;
}
.types-change-box {
  width: 750px;
  height: 670px;
  padding: 40px 50px;
}
.types-change-title {
  font-size: 30px;
  font-family: Source Han Sans CN-Medium;
  font-weight: 500;
  color: #206ef2;
  text-align: center;
  margin-bottom: 16px;
}
.types-change-mess {
  font-size: 16px;
  color: #a2abc7;
  text-align: center;
  margin-bottom: 30px;
}
.types-list-box {
  width: 650px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.types-list-box .top-type {
  margin-bottom: 50px;
  margin-right: 0;
}
.top-type-state {
  position: absolute;
  font-size: 16px;
  color: #a2abc7;
  bottom: -30px;
}
.top-type-num span:last-of-type {
  padding-left: 5px;
  font-size: 16px;
  color: #a2abc7;
}
.types-btn {
  text-align: center;
}
.types-btn button {
  width: 116px;
  height: 40px;
  background: #206ef2;
  border-radius: 6px;
  font-size: 18px;
  color: #ffffff;
}
</style>
<style>
.top-types-box {
  display: flex;
}

.top-types-box-types {
  margin: 0 30px 30px 0;
}

.top-types-box-right {
  width: 310px;
  height: 104px;
  display: flex;
  justify-content: space-around;
  padding: 21px;
}
</style>
